import './index.css';
import './list.less';
import { Layout, Breadcrumb, Space, Form, Input, Button, Select, Table, Pagination, Modal, Radio, DatePicker } from 'antd';
import React, { useState, useEffect } from 'react';
import Date from '../../components/Date'
import careStore from '../../store/carefulSrc';
import { observer } from 'mobx-react';
import http from '../../utils/http'


const { Column } = Table;
const { Content } = Layout;

// 分页布局
function itemRender(current, type, originalElement) {
    if (type === 'prev') {
        return <a>上一页</a>;
    }
    if (type === 'next') {
        return <a>下一页</a>;
    }
    return originalElement;
}

function List(props) {
    // console.log('List也买你', props);
    careStore.setPathName(props.location.pathname);
   

    const [form] = Form.useForm();

    // 添加按钮弹出的模态框，是异步操作
    const [visible, setVisible] = React.useState(false);
    const [visible2, setVisible2] = React.useState(false);
    const [visible3, setVisible3] = React.useState(false);
    const [visible4, setVisible4] = React.useState(false);
    const [visible5, setVisible5] = React.useState(false);
    const showModal = () => {
        setVisible(true);
    };
    
    const handleCancel = () => {
        setVisible(false);
    };
    // 弹框中的表单提交
    const layout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 16 },
    };
    function formatTime(time){
        let time2 = time.toString();
        let arr = time2.split(' ');
        // console.log(arr, arr[2]);
        let mon;
        switch (arr[1]){
            case 'Aug':
                mon = '08';
                break;
            case 'Sep':
                mon = '09';
                break;
        }
        let createTime3 = arr[3]+'-'+mon+'-'+arr[2]+' '+arr[4];
        return createTime3;
    }
    function formatTime2(time){
        let time2 = time.toString();
        let arr = time2.split(' ');
        // console.log(arr, arr[2]);
        let mon;
        switch (arr[1]){
            case 'Aug':
                mon = '08';
                break;
            case 'Sep':
                mon = '09';
                break;
        }
        let createTime3 = arr[3]+'-'+mon+'-'+arr[2];
        return createTime3;
    }
    // 陪护员列表添加
    const onFinish2 = (values) => {
        http({
            url:'/carefulManManege/add',
            method:'post',
            data:{
                num:values.num,
                password:123456,
                user:'技师',
                name:values.name,
                tel:values.tel,
                payee:values.payee,
                bankName:values.bankName,
                bankId:values.bankId,
                devices:values.devices,
                dId:2,
                ability:values.ability,
                serviceArea:values.serviceArea,
                createTime:formatTime(values.createTime._d),
                runState:values.runState=='启用'?1:0,
            }
        }).then(res => {
            // console.log(res);
            if(res.status == 200){
                getList();
                setVisible(false);
                
            }
        })
    };


    //  存表格中的数据
    // 表格中的查看，编辑等弹出框
    // 点击查看按钮取到表格中的值


    // 定义查看的表单变量
    const [formData2] = Form.useForm();
    // 查看函数
    const showModal2 = (text) => {
        setVisible2(true);
        // 保存这一行的数据到 formData2 中
        formData2.setFieldsValue(text);

    };
    const handleCancel2 = () => {
        // console.log('Clicked cancel button');
        setVisible2(false);
    };
    // 查看模态框关闭
    const onClose = () => {
        setVisible2(false);
    }

    // 定义编辑的表单变量
    const [formData3] = Form.useForm();
    // 定义id
    const [editId, setEditId] = useState(1)
    const showModal3 = (text) => {
        setVisible3(true);
        // 设置id
        setEditId(text.id);
        // console.log(2222222, text.id);
        formData3.setFieldsValue(text);
        

    };
    /* -----------弹框中的编辑--------------- */
    const onFinish3 = (values) => {
        // console.log(formData3.getFieldsValue());
        console.log(11111111, values.user);
        // 修改数据接口请求
        http({
            url: '/carefulManManege/update',
            method: 'post',
            data: {
                id: editId,
                user: values.user,
                name: values.name,
                tel: values.tel,
                serviceArea: values.serviceArea,
                payee: values.payee,
                bankName: values.bankName,
                bankId: values.bankId,
                runState: values.runState=="启用"?1:0
            }
        }).then((res) => {
            // console.log('update', res);
            // 重新渲染
            getList();
            setVisible3(false);
        })
    };
   
    const handleCancel3 = () => {
        console.log('Clicked cancel button');
        setVisible3(false);
    };

    // 弹框中的重置密码
    // 定义id
    const [passId, setPassId] = useState(0)
    const showModal2_3 = (text) => {
        setVisible4(true);
        setPassId(text.id);
    };
    const handleOk4 = () => {
        http({
            url:'/carefulManManege/setSecret',
            method:'post',
            data:{
                id:passId,
                password: 123456
            }
        }).then(res => {
            console.log(res, 1212)
            if(res.status == 200){
                getList();
                setVisible4(false);
            }
            
        })
    };
    const handleCancel4 = () => {
        setVisible4(false);
    };
    // 删除弹框
    const [delId, setDelId] = useState(0)
    const showModal2_4 = (text) => {
        setVisible5(true);
        setDelId(text.id);
    };
    const handleOk5 = () => {
        http({
            url:'/carefulManManege/delPeople',
            method:'post',
            data:{
                id: delId
            }
        }).then(res => {
            if(res.status == 200){
                getList();
                setVisible5(false);
            }
        })
    };
    const handleCancel5 = () => {
        setVisible5(false);
    };
  

    // 请求后台数据
    const [list1, setList1] = useState([]);
    // 一开始渲染数据
    function getList(){
        http({
            url: '/carefulManManege/list',
        }).then(res => {
            res.data && res.data.forEach(v => {
                v.runState = v.runState ? '启用' : '禁止';
            })
            setList1(res.data);
        })
    }
    useEffect(() => {
       getList();
    }, [])
    // 上面的筛选行
    // 筛选行的模糊查询
    const onFinish = (values) => {
        console.log('Finish:', values);
        http({
            url:'/carefulManManege/seePeople',
            // method:'post',
            data:{
                user:values.user,
                name:values.name,
                serviceArea:values.serviceArea,
                createTime:formatTime2(values.createTime._d),
                runState:values.runState=='启用'?1:0,
            }
        }).then(res => {
            console.log('筛选0',res.data);
            if(!res.error){
                res.data && res.data.forEach(v => {
                    v.runState = v.runState ? '启用':'禁止';
                })
                setList1(res.data);
                // console.log(list1);
                // getList();
            }
        })

    };


    return <div className="listCss">
        <p className="breadCss">陪护员列表</p>
        <Breadcrumb className="breadCss2">
            <Breadcrumb.Item>陪护员管理</Breadcrumb.Item>
            <Breadcrumb.Item>陪护员列表</Breadcrumb.Item>
        </Breadcrumb>
        <Content
            className="dD_Css"
        >
            {/* 上面的筛选行 */}
            <div className="dateRow">
                {/* 筛选的内容部分 */}
                <>
                    <Form
                        // onValuesChange={onFormLayoutChange}
                        layout="inline"
                        form={form}
                        size="middle"
                        className="formCss"
                        onFinish={onFinish}
                    >
                        <div className="formItemBox">
                            <Form.Item label="时间" name="createTime">
                                <DatePicker placeholder="请选择日期" />
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="姓名" name="name">
                                <Input placeholder="请输入姓名" />
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="用户名" name="user">
                                <Input placeholder="请输入用户名" />
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="区域" name="serviceArea">
                                <Select>
                                    <Select.Option value="外滩">外滩</Select.Option>
                                    <Select.Option value="黄浦江">黄浦江</Select.Option>
                                    <Select.Option value="人民广场">人民广场</Select.Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="状态" name="runState">
                                <Select>
                                    <Select.Option value="禁用">禁用</Select.Option>
                                    <Select.Option value="启用">启用</Select.Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <Form.Item >
                            <Button type="primary" htmlType="submit">筛选</Button>
                        </Form.Item>
                    </Form>
                </>
                {/* 添加按钮弹出的内容 */}
                <>
                    <Button type="primary" onClick={showModal} className="addBtnCss">
                        添加
                    </Button>
                    {/* 弹出的模态框 */}
                    <Modal
                        title="添加"
                        visible={visible}
                        // onOk={handleOk}
                        // confirmLoading={confirmLoading}
                        onCancel={handleCancel}
                        footer={null}
                    >
                        {/* 弹出框里面的表单 */}
                        <Form {...layout} name="messages" onFinish={onFinish2}>
                            <Form.Item name="num" label="账号">
                                <Input placeholder="请输入账号" />
                            </Form.Item>
                            <Form.Item name="name" label="姓名">
                                <Input placeholder="请输入姓名" />
                            </Form.Item>
                            <Form.Item name="tel" label="电话">
                                <Input placeholder="请输入电话" />
                            </Form.Item>
                            <Form.Item name="serviceArea" label="区域">
                                <Select>
                                    <Select.Option value="外滩">外滩</Select.Option>
                                    <Select.Option value="黄浦江">黄浦江</Select.Option>
                                    <Select.Option value="人民广场">人民广场</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item name="ability" label="能力范围">
                                <Select>
                                    <Select.Option value="助医、清洁、陪护">助医、清洁、陪护</Select.Option>
                                    <Select.Option value="清洁">清洁</Select.Option>
                                    <Select.Option value="理发">理发</Select.Option>
                                    <Select.Option value="个人护理">个人护理</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item name="payee" label="收款人">
                                <Input placeholder="请输入收款人" />
                            </Form.Item>
                            <Form.Item name="devices" label="设备">
                                <Input placeholder="请输入当前设备名称" />
                            </Form.Item>
                            <Form.Item name="bankName" label="开户行">
                                <Input placeholder="请输入开户行" />
                            </Form.Item>
                            <Form.Item name="bankId" label="卡号">
                                <Input placeholder="请输入卡号" />
                            </Form.Item>
                            <Form.Item name="createTime" label="时间">
                                <DatePicker placeholder="请选择日期" />
                            </Form.Item>
                            <Form.Item name="runState" label="状态">
                                <Radio.Group>
                                    <Radio value="启用">启用</Radio>
                                    <Radio value="禁用">禁用</Radio>
                                </Radio.Group>
                            </Form.Item>

                            <Form.Item
                                wrapperCol={{
                                    sm: {
                                        span: 16,
                                        offset: 8,
                                    },
                                }}
                            >
                                <Button type="primary" htmlType="submit">
                                    确定
                                        </Button>
                                <Button type="plain" className="btnCss">
                                    取消
                                        </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                </>
                {/* </div> */}
            </div>
            {/* 表格 */}
            <div className="tableBox">
                <Table
                    // columns={columns}
                    dataSource={list1}
                    size="middle"
                    className="tableCss"
                    pagination={false}
                    rowKey="name"
                >

                    <Column title="用户名" dataIndex="user" key="1" />
                    <Column title="姓名" dataIndex="name" key="2" />
                    <Column title="电话" dataIndex="tel" key="3" />
                    <Column title="区域" dataIndex="serviceArea" key="4" />
                    <Column title="订单数" dataIndex="count" key="5" />
                    <Column title="创建时间" dataIndex="createTime" key="6" />
                    <Column title="状态" dataIndex="runState" key="7" />
                    <Column
                        title="操作"
                        key="8"
                        render={(text, record) => (
                            <Space size="middle">
                                <a onClick={() => showModal2(text)}>
                                    查看
                                </a>
                                <a onClick={() => showModal3(text)}>
                                    编辑
                                </a>
                                <a onClick={() => showModal2_3(text)}>
                                    重置密码
                                </a>
                                <a onClick={() => showModal2_4(text)}>
                                    删除
                                </a>
                                {/* 查看模态框 */}
                                <Modal
                                    title="提示"
                                    onCancel={handleCancel2}
                                    visible={visible2}
                                    footer={null}

                                >
                                    {/* 弹出框里面的表单 */}
                                    <Form {...layout}
                                        name="nest-messages"
                                        // onFinish={onFinish2}
                                        form={formData2}
                                    >
                                        <Form.Item name="user" label="用户名">
                                            <Input placeholder="请输入用户名" />
                                        </Form.Item>
                                        <Form.Item name="name" label="姓名">
                                            <Input />
                                        </Form.Item>
                                        <Form.Item name="tel" label="电话">
                                            <Input />
                                        </Form.Item>
                                        <Form.Item name="serviceArea" label="区域">
                                            <Input />
                                        </Form.Item>
                                        <Form.Item name="payee" label="收款人">
                                            <Input />
                                        </Form.Item>
                                        <Form.Item name="bankName" label="开户行">
                                            <Input />
                                        </Form.Item>
                                        <Form.Item name="bankId" label="卡号">
                                            <Input />
                                        </Form.Item>
                                        <Form.Item name="runState" label="状态">
                                            <Input />
                                        </Form.Item>

                                        <Form.Item
                                            wrapperCol={{
                                                // xs: {
                                                //     span: 24,
                                                //     offset: 0,
                                                // },
                                                sm: {
                                                    span: 16,
                                                    offset: 8,
                                                },
                                            }}
                                        >

                                            <Button type="plain" className="btnCss" onClick={onClose}>
                                                关闭
                                            </Button>
                                        </Form.Item>
                                    </Form>
                                </Modal>
                                {/* 编辑模态框 */}
                                <Modal
                                    title="编辑"
                                    // visible={isModalVisible} 
                                    // onOk={handleOk3}
                                    onCancel={handleCancel3}
                                    visible={visible3}
                                    // confirmLoading={confirmLoading}
                                    footer={null}

                                >
                                    {/* 弹出框里面的表单 */}
                                    <Form {...layout}
                                        name="nest-messages"
                                        onFinish={onFinish3}
                                        form={formData3}
                                    >
                                        <Form.Item name="user" label="用户名">
                                            <Input placeholder="请输入用户名" />
                                        </Form.Item>
                                        <Form.Item name="name" label="姓名">
                                            <Input placeholder="请输入姓名" />
                                        </Form.Item>
                                        <Form.Item name="tel" label="电话">
                                            <Input placeholder="请输入电话" />
                                        </Form.Item>
                                        <Form.Item name="serviceArea" label="区域">
                                            <Select>
                                                <Select.Option value="外滩">外滩</Select.Option>
                                                <Select.Option value="黄浦江">黄浦江</Select.Option>
                                                <Select.Option value="人民广场">人民广场</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item name="payee" label="收款人">
                                            <Input placeholder="请输入收款人" />
                                        </Form.Item>
                                        <Form.Item name="bankName" label="开户行">
                                            <Input placeholder="请输入开户行" />
                                        </Form.Item>
                                        <Form.Item name="bankId" label="卡号">
                                            <Input placeholder="请输入卡号" />
                                        </Form.Item>
                                        <Form.Item name="runState" label="状态">
                                            <Radio.Group>
                                                <Radio value="启用">启用</Radio>
                                                <Radio value="禁用">禁用</Radio>
                                            </Radio.Group>
                                        </Form.Item>

                                        <Form.Item
                                            wrapperCol={{
                                                sm: {
                                                    span: 16,
                                                    offset: 8,
                                                },
                                            }}
                                        >
                                            <Button type="primary" htmlType="submit">
                                                确定
                                            </Button>
                                            <Button type="plain" className="btnCss" onClick={handleCancel3}>
                                                取消
                                            </Button>
                                        </Form.Item>
                                    </Form>
                                </Modal>
                                {/* 重置密码模态框 */}
                                <Modal
                                    title="提示"
                                    // visible={isModalVisible} 
                                    onOk={handleOk4}
                                    onCancel={handleCancel4}
                                    cancelText="取消"
                                    okText="确定"
                                    visible={visible4}
                                    // confirmLoading={confirmLoading}
                                // footer={[
                                //     <Button onClick={handleOk4}>确定</Button>,
                                //     <Button onClick={handleCancel4}>取消</Button>
                                // ]}
                                >
                                    <h3>是否将该陪护员密码重置？</h3>
                                    <p>陪护员将重置为默认密码</p>
                                </Modal>
                                {/* 删除模态框 */}
                                <Modal
                                    title="提示"
                                    // visible={isModalVisible} 
                                    onOk={handleOk5}
                                    onCancel={handleCancel5}
                                    cancelText="取消"
                                    okText="确定"
                                    visible={visible5}
                                    // confirmLoading={confirmLoading}
                                >
                                    <h3>确定将该陪护员删除？</h3>
                                    <p>删除后陪护员将无法登录</p>
                                </Modal>
                            </Space>

                        )}
                    />
                </Table>
            </div>
            {/* 分页 */}
            <div className="pageCss">
                <>
                    <Pagination
                        showSizeChanger
                        showTotal={total => ` ${total}条记录`}
                        total={15}
                        size="small"
                        // showQuickJumper
                        itemRender={itemRender}

                    />
                </>,
            </div>
        </Content>
    </div>
}
export default observer(List);